<template>
  <div class="massagebox">
    <van-nav-bar title="消息中心">
      <van-icon slot="left" name="arrow-left" @click="$router.back()" />
    </van-nav-bar>
    <van-tabs v-model="active">
      <van-tab title="系统通知">
        <div class="massage1">
          <van-image
            class="tongzhi"
            round
            width="42"
            height="42"
            :src="require('../../../assets/通知ICO@3x.jpg')"
          >
          </van-image>
          <span class="boxmass">
            <i class="time">2022-04-19 23:47:00</i>
            <span class="chozhi"
              >恭喜您充值到账<i class="qian">200.00</i>元。</span
            >
          </span>
        </div>

        <div class="massage1">
          <van-image
            class="tongzhi"
            round
            width="42"
            height="42"
            :src="require('../../../assets/通知ICO@3x.jpg')"
          >
          </van-image>
          <span class="boxmass">
            <i class="time">2022-04-19 23:47:00</i>
            <span class="chozhi"
              >恭喜您充值到账<i class="qian">200.00</i>元。</span
            >
          </span>
        </div>

        <div class="massage1">
          <van-image
            class="tongzhi"
            round
            width="42"
            height="42"
            :src="require('../../../assets/通知ICO@3x.jpg')"
          >
          </van-image>
          <span class="boxmass">
            <i class="time">2022-04-19 23:47:00</i>
            <span class="chozhi"
              >恭喜您充值到账<i class="qian">200.00</i>元。</span
            >
          </span>
        </div>
      </van-tab>

      <van-tab title="平台公告">
        <div class="massage2">
          <van-image
            class="gonggao"
            round
            width="42"
            height="42"
            :src="require('../../../assets/公告ICO@3x.jpg')"
          >
          </van-image>
          <span class="boxmass2">
            <i class="time2">2022-04-19 23:47:00</i>
            <span class="chozhi2"
              >尊敬的会员您好:
              <i class="qian2">
                平台计划与2000年4月25日03:00-06:00进行
                系统维护，预计三小时完成。对您造成的不便
                深表歉意。感谢您一直以来的信任与支持。
              </i></span
            >
          </span>
        </div>

        <div class="massage2">
          <van-image
            class="gonggao"
            round
            width="42"
            height="42"
            :src="require('../../../assets/公告ICO@3x.jpg')"
          >
          </van-image>
          <span class="boxmass2">
            <i class="time2">2022-04-19 23:47:00</i>
            <span class="chozhi2"
              >尊敬的会员您好:
              <i class="qian2">
                平台计划与2000年4月25日03:00-06:00进行
                系统维护，预计三小时完成。对您造成的不便
                深表歉意。感谢您一直以来的信任与支持。
              </i></span
            >
          </span>
        </div>

        <div class="massage2">
          <van-image
            class="gonggao"
            round
            width="42"
            height="42"
            :src="require('../../../assets/公告ICO@3x.jpg')"
          >
          </van-image>
          <span class="boxmass2">
            <i class="time2">2022-04-19 23:47:00</i>
            <span class="chozhi2"
              >尊敬的会员您好:
              <i class="qian2">
                平台计划与2000年4月25日03:00-06:00进行
                系统维护，预计三小时完成。对您造成的不便
                深表歉意。感谢您一直以来的信任与支持。
              </i></span
            >
          </span>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 2,
    };
  },
};
</script>
<style lang="less" scoped>
.massagebox {
  background-color: #f0f0f0;
  height: 1800px;

  //信息通知的样式
  .massage1 {
    display: flex;
    justify-content: space-evenly;
    margin: 25px 45px 20px 0;
    .tongzhi {
      margin-top: px;
      margin-left: 24px;
    }
    .boxmass {
      display: inline-block;
      height: 124px;
      width: 520px;
      background-color: #ffffff;
      border-radius: 15px;
      .time {
        color: #bebebf;
        font-size: 12px;
        font-style: normal;
        padding-left: 20px;
      }
      .chozhi {
        font-size: 13px;
        display: inline-block;
        padding-left: 20px;
        font-weight: 600;
      }
      .qian {
        font-style: normal;
        color: #d84864;
      }
    }
  }
  //信息通知样式

  //平台公告
  .massage2 {
    display: flex;
    justify-content: space-evenly;
    margin: 25px 45px 20px 0;
    .gonggao {
      margin-top: px;
      margin-left: 24px;
    }
    .boxmass2 {
      display: inline-block;
      height: 248px;
      width: 520px;
      background-color: #ffffff;
      border-radius: 15px;
      .time2 {
        color: #bebebf;
        font-size: 12px;
        font-style: normal;
        padding-left: 20px;
      }
      .chozhi2 {
        font-size: 13px;
        display: inline-block;
        padding-left: 20px;
        font-weight: 600;
        margin-top: 10px;
      }
      .qian2 {
        display: inline-block;
        font-style: normal;
        color: #5c5d60;
        margin-top: 14px;
      }
    }
  }
  //平台公告
}
</style>
